<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        svg {
            width: 1000px;
            height: 400px;
            border: 1px solid black;
        }

        line {
            background: cyan;
        }
    </style>
</head>

<body>
    <!-- 绘制各种何种图形 -->
    <svg>
        <!-- 绘制直线 -->
        <!-- <line x1='100' y1="100" x2="200" y2="200" stroke="green" stroke-width="10"></line> -->
        <!-- 绘制矩形 -->
        <!-- <rect x="100" y="100" width="100" height="100" fill="red"></rect> -->
        <!-- 绘制圆 -->
        <!-- <circle cx='70' cy='95' r='50' style='stroke:black; fill:yellowgreen'></circle> -->

        <path stroke='red' d="
  M 100 100
  L 400 200
  L 300 300
  L 10 30
  L 194 250
"></path>
    </svg>


    <svg t="1664250735356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2547" width="200" height="200">
        <path d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z" p-id="2548"></path>
    </svg>
</body>

</html>